<template>
  <div class="table">
    <!--  :height="tableHeight" -->
    <el-table
      :data="tableData"
      stripe
      :height="tableHeight"
      v-loading="loading"
      ref="tableRef"
      element-loading-text="加载中"
    >
      <el-table-column type="index" label="序号" width="180"> </el-table-column>
      <el-table-column prop="indexName" label="指标体系名称"> </el-table-column>
      <!--      <el-table-column prop="areaName" label="体检城市" width="150">-->
      <!--      </el-table-column>-->
      <el-table-column prop="year" label="体检年份" width="120">
      </el-table-column>
      <el-table-column prop="indexCount" label="指标数量" width="80">
      </el-table-column>
      <el-table-column
        prop="explain"
        label="指标体系说明"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column prop="areaName" label="所属区县"> </el-table-column>
      <el-table-column prop="createUserName" label="创建人"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="status" label="发布状态" width="150">
        <template v-slot="scope">
          <!-- {{ scope.row.status === '1' ? '已发布' : '未发布' }} -->
          <el-tag
            :type="
              stateCheck(scope.row.status) === '已发布' ? 'success' : 'danger'
            "
            size="small"
            disable-transitions
            >{{ stateCheck(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="scope">
          <el-button
            v-if="currentUser?.hasPermission(PERMISSIONS.特色指标详情)"
            type="text"
            @click="editIndicatorSystem(scope.row.pkid, scope.row.status)"
            >{{
              currentUser?.getButtonName(PERMISSIONS.特色指标详情)
            }}</el-button
          >
          <!--          <template v-if="!isCq">-->
          <template v-if="scope.row.status == '0'">
            <el-button
              v-if="currentUser?.hasPermission(PERMISSIONS.特色指标编辑)"
              type="text"
              @click="editIndicatorSystem(scope.row.pkid)"
              >{{
                currentUser?.getButtonName(PERMISSIONS.特色指标编辑)
              }}</el-button
            >
            <!-- <el-button type="text" @click="editIndicatorSystem(scope.row.pkid)">编辑</el-button>
            <el-button
              type="text"
              @click="publish(scope.row.pkid)"
              v-if="scope.row.indexDataTotal > 0"
              >发布</el-button
            > -->
            <!-- <el-button type="text" @click="deleteIndicatorSystem(scope.row.pkid)">删除</el-button> -->
            <el-popconfirm
              style="margin-left: 10px"
              title="确定删除该指标体系吗？"
              @confirm="deleteIndicatorSystem(scope.row.pkid)"
            >
              <el-button
                v-if="currentUser?.hasPermission(PERMISSIONS.特色指标删除)"
                slot="reference"
                type="text"
                style="color: #ff125b"
              >
                {{ currentUser?.getButtonName(PERMISSIONS.特色指标删除) }}
              </el-button>
            </el-popconfirm>
          </template>
          <template v-else>
            <el-popconfirm
              style="margin-left: 10px"
              title="确定取消发布该指标吗？"
              @confirm="handleCancelPublish(scope.row.pkid)"
            >
              <el-button
                v-if="currentUser?.hasPermission(PERMISSIONS.特色指标取消发布)"
                slot="reference"
                type="text"
                style="color: #ff125b"
              >
                {{ currentUser?.getButtonName(PERMISSIONS.特色指标取消发布) }}
              </el-button>
            </el-popconfirm>
          </template>
          <!--          </template>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageQuery.pageIndex"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pageQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageQuery.total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="编辑指标体系"
      :visible.sync="editVisible"
      width="30%"
      :before-close="handleCloseEdit"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deleteSpecialIndex, publishSpecialIndex } from '@api/city-index'
import { Message } from 'element-ui'
import { PERMISSIONS } from '@/common/user'
import { mapGetters } from 'vuex'

export default {
  props: {
    tableData: {
      required: true,
      type: Array,
      default: () => [],
    },
    pageQuery: {
      type: Object,
      required: true,
    },
    loading: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      PERMISSIONS,
      elTagTypeList: ['', 'success', 'warning', 'danger'],
      indicatorSystemForm: {
        pkid: '',
        areaId: '',
        year: '',
        describe: '',
        status: 1,
      },
      // edit
      editVisible: false,
      tableHeight: null,
      tableRef: null,
      isCq: false,
    }
  },
  computed: {
    ...mapGetters(['currentUser']),
    stateCheck: () => {
      return (val) => (val == '1' ? '已发布' : '未发布')
    },
  },
  created() {
    // window.addEventListener('resize', this.getTableHeight);
  },
  mounted() {
    const user = this.$store.getters.user
    this.isCq = user.roleId === 'citymanager'
    this.getTableHeight()
  },
  methods: {
    handleCancelPublish(pkid) {
      publishSpecialIndex(pkid, 0).then((res) => {
        if (res.success) {
          console.log(res.data)
          Message.success('取消发布成功！')
          this.$emit('fetchData')
        }
      })
    },
    deleteIndicatorSystem(id) {
      deleteSpecialIndex(id).then((res) => {
        if (res.success) {
          console.log(res.data)
          Message.success('删除成功！')
          this.$emit('fetchData')
        }
      })
    },
    previewIndicatorSystemInfo(id) {
      this.$router.push({
        path: `/data-converge/indicator-manage-special-details/${id}`,
      })
    },
    editIndicatorSystem(id, status) {
      this.$router.push({
        path: `/data-converge/indicator-manage-special-edit/${id}`,
        query: {
          pkid: id,
          remark: status,
        },
      })
    },
    handleCloseEdit() {
      console.log('handleCloseEdit')
    },
    handleSizeChange(val) {
      console.log(val, '--')
      this.$emit('update:pageQuery', { ...this.pageQuery, pageSize: val })
    },
    handleCurrentChange(val) {
      this.$emit('update:pageQuery', { ...this.pageQuery, pageIndex: val })
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    getTableHeight() {
      const tHeight = document.querySelector('.table')?.clientHeight - 38
      const fHeight = document.querySelector('.footer')?.clientHeight + 10
      this.tableHeight = `${tHeight - fHeight}px`
      // console.log(tHeight, fHeight)
    },
  },
}
</script>

<style lang="scss" scoped>
.ellipsis {
  width: 70px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.table {
  height: calc(100% - 108px);
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  padding: 19px;
  overflow: scroll;
}
.footer {
  margin: 15px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  bottom: 19px;
  right: 19px;
}
.ellipsis {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
// .el-tooltip__popper {
//   font-size: 14px;
//   max-width: 50%;
// }

::v-deep {
  .el-table__row {
    height: 60px;
  }
}
</style>
